﻿@using System.Linq
@using CML.Intercamber.Business.Model
@{
    ViewBag.PageTitle = Resources.Intercamber.Home_PageName;
    List<EstablishmentsDetail> establishments = ViewBag.Establishments;
    List<NewsDetail> news = ViewBag.ListNews;
}
@section PageHead
{
    <style>
        .mapItem{
            width: 16px;
            height: 16px;
            text-align: center;
            position: absolute;
            line-height: 16px;
            cursor: pointer;
            z-index: 1000;
            background-image:url(/Images/Home/Marker.png);
        }
        .newsTitle {
            width: 100%;
            margin-top: 6px;
            font-weight: bold;
            font-size: 15px;
            text-align: left;
        }
        .newsAuthor {
            font-weight: normal;
            font-size: 9px;
            margin-left: 6px;
        }
        .newsContent {
            width: 100%;
        }
    </style>
}
@section PageLeftBar
{
    @Html.Partial("~/Views/Shared/_LeftBarUserDetailPartial.cshtml")
}
@section PageContent {
    <script type="text/javascript">
        var listEstablishemnts = @(Html.Raw(Json.Encode(establishments.Where(x => x.MapPosX != null && x.MapPosY != null).Select(x => new {name = x.LblEstablishment, city = x.City, students = x.NumberStudents, teachers = x.NumberTeachers, x = x.MapPosX, y = x.MapPosY}).ToList())));
        var listNews = @(Html.Raw(Json.Encode(news.Select(x => new {x.IdEstablishment, x.Message, x.Title, x.DateCreationStr, x.IdNews, x.LblUserCreation}))));

        var strings = {
            numStudents: "@Resources.Intercamber.Home_NbStudents",
            numTeachers: "@Resources.Intercamber.Home_NbTeachers",
            writenByOn: "@Resources.Intercamber.NewsAdmin_WriterByOn",
        };

        var newsViewerManager = new function() {
            this.init = function() {
                for (var i = 0, maxI = listNews.length; i < maxI; i++) {
                    var news = listNews[i];
                    dispNews(news);
                }
            };

            function dispNews(el) {
                $("#listNews").append("<div class='newsTitle'>" + el.Title + "<span class='newsAuthor'>" + strings.writenByOn.replace("{0}", el.LblUserCreation).replace("{1}", el.DateCreationStr) + "</span></div><div class='newsContent'>" + el.Message + "</div>");
            }
        };

        $(function() {
            var map = $('#map');
            for (var i = 0, max = listEstablishemnts.length; i < max; i++) {
                var e = listEstablishemnts[i];
                var mapItem = $('<span class="mapItem"> </span>');
                mapItem.css("margin", e.y + "px 0 0 " + e.x + "px").appendTo(map);
                $('<div />').qtip({
                    content: "<b>" + e.name + "</b>, " + e.city + "<br/>" + strings.numStudents.replace("{0}", e.students) + "</br/>" + strings.numTeachers.replace("{0}", e.teachers),
                    position: { target: 'event', effect: false, at: "top center", my: "bottom center" },
                    show: { target: mapItem, effect: false },
                    hide: { target: mapItem },
                    style: { classes: "qtip-bootstrap" },
                });
            }
            newsViewerManager.init();
        });
    </script>

    <table border="0" cellpadding="0" cellspacing="4" style="width: 100%">
        <tr>
            <td width="50%" align="center" style="padding-top:2px;">
                <div class="ui-corner-all" style="width: 360px; height: 334px; display: block; background-image: url(/Images/Home/map.png); text-align: left;" id="map">
                </div>
            </td>
            <td rowspan="2" class="ui-corner-all widget" align="center" >
                <div  class="innerTitle ui-corner-all">@Resources.Intercamber.Home_NewsTitle</div>
                <div id="listNews" style="width: 98%; margin: 0 6px;"></div>
            </td>
        </tr>
    </table>
}